<template>
  <!-- 变电站概况-右侧视频- -->
  <div class="surveillance-video-box borderStyle centerbox">
    <div id="surveillanceVideo"></div>
    <div class="page centerbox">
      <div>
        <span class="el-icon-arrow-left pointer" @click="last"></span>
        <span>{{page}}</span>
        <span>/</span>
        <span>{{totalPage}}</span>
        <span class="el-icon-arrow-right pointer" @click="next"></span>
      </div>
      <div class="control-bot endbox">
        <div class="pointer centerbox" :class="{active:size===1}" @click="setWindow('1')">
          <div class="yhm"></div>
        </div>
        <div class="pointer centerbox" :class="{active:size===4}" @click="setWindow('2')">
          <div class="shm"></div>
        </div>
        <!-- <div class="pointer centerbox" @click="setWindow(3)">
          <div class="jhm"></div>
        </div>-->
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import PreviewOCX from "@/utils/PreviewClass.js";
@Component
export default class extends Vue {
  // 变电站概况-区域3-机器人视频展示区域
  // {bdzId:'100435539'}
  /*
  {
    "success": true,
    "message": "操作成功！",
    "code": 200,
    "data": [
      {
        "VIDEOCODE": "001254",
        "BDZMC": "110kV商西变电站",
        "BDZID": "100435539",
        "CAMERATYPE": "0",
        "SORT": 1
      }
    ]
  }
  */
  page = 1;
  last() {
    if (this.page > 1) {
      this.page--;
    }
  }
  next() {
    if (this.totalPage > this.page) {
      this.page++;
    }
  }
  getJqrByBdz() {
    var params = {
      bdzId: this.$route.query.BDZID || "100435539",
    };
    (this as any).$services
      .getJqrByBdz({ data: params, dataType: "text" })
      .then((result: any) => {
        if (result.data) {
          let shipinData = {
            stationId: "",
            list: [],
          };
          let list = [];
          result.data.map((k) => {
            list.push({
              indexCode: k.VIDEOCODE,
              stationId: k.BDZID,
            });
          });
          shipinData.list = list;
          shipinData.stationId = list[0].stationId;
          this.shipinData = shipinData;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  PreviewOCX: any = null;
  created() {
    this.getJqrByBdz();
  }
  mounted() {
    let ocx = this.init();
    ocx.setWindowsLayout(2);
    this.setWindow("1");
    ocx.setTokenCallEvent(this.tokenCallEvent.bind(this));
    ocx.setCallBack();
  }
  setWindow(key) {
    let layout = {
      "1": {
        layout: 1,
        size: 1,
      },
      "2": {
        layout: 2,
        size: 4,
      },
    };
    let currentLayout = layout[key];
    this.PreviewOCX.setWindowsLayout(currentLayout.layout);
    this.page = 1;
    this.size = currentLayout.size;
  }
  // 初始化视频插件
  init() {
    let ocx = (this.PreviewOCX = new (PreviewOCX as any)({
      divId: "surveillanceVideo",
      theme: "",
    }));
    return ocx;
  }
  // 播放视频列表
  shipinData = {
    stationId: "",
    list: [
      {
        indexCode: "",
        stationId: "",
      },
    ],
  };
  // 窗口数量
  size = 1;
  get newshipinData() {
    let shipinData = JSON.parse(JSON.stringify(this.shipinData));
    shipinData.list = shipinData.list.slice(
      (this.page - 1) * this.size,
      this.page * this.size
    );
    return shipinData;
  }
  get totalPage() {
    let list = this.shipinData.list;
    let length = list.length;
    let total = Math.ceil(length / this.size);
    return total;
  }
  @Watch("newshipinData")
  setPreview(newshipinData) {
    if (!this.shipinData.stationId) {
      return false;
    }
    let ocx = this.PreviewOCX;
    let list = newshipinData.list.slice(0, ocx.windowNumber);
    list.forEach((v) => {
      this.getPreview(v);
    });
  }
  // 获取视频流
  async getPreview(data) {
    // let data = {
    //   indexCode: "001246",
    //   stationId: "100435539",
    // };
    // console.log(data);

    await (this as any).$services
      .getPreview({ data, dataType: "text" })
      .then((xml: any) => {
        // if (xml) {
        let ocx = this.PreviewOCX;
        var winindex = ocx.getSelectWindow();
        // console.log(
        //   "winindex:" + winindex,
        //   "ocx.startPreview(winindex, xml):" + ocx.startPreview(winindex, xml)
        // );
        if (ocx.startPreview(winindex, xml) === 0) {
          if (ocx.setSelectWindow(winindex + 1) === -1) {
            ocx.setSelectWindow(0);
          }
        }
        // } else {
        //   this.$message.warning("没有找到对应的播放点！");
        // }
        return true;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  tokenCallEvent(reqID) {
    if (!this.newshipinData.stationId) {
      return false;
    }
    let data = {
      // stationId: "100435539",
      stationId: this.newshipinData.stationId,
    };
    (this as any).$services
      .getTokens({ data, dataType: "text" })
      .then((result: any) => {
        // console.log(123, result);
        this.PreviewOCX.setToken(reqID, result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
.surveillance-video-box {
  width: 100%;
  height: 100%;
  position: relative;
  flex-wrap: wrap;
  #surveillanceVideo {
    width: 100%;
    height: calc(100% - 0.5rem);
  }
  .page {
    width: 100%;
    height: 0.5rem;
    position: relative;
    > span {
      margin: 0 0.02rem;
    }
  }
  .control-bot {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0.1rem;
    > div {
      width: 0.4rem;
      height: 0.4rem;
    }
    .yhm,
    .shm,
    .jhm {
      width: 0.26rem;
      height: 0.26rem;
      margin: 4px auto;
      cursor: pointer;
    }
    .yhm {
      background: url("../../../../../assets/img/VideoControl/1.png") no-repeat
        center center;
      background-size: 100% 100%;
    }
    .shm {
      background: url("../../../../../assets/img/VideoControl/4.png") no-repeat
        center center;
      background-size: 100% 100%;
    }
    .jhm {
      background: url("../../../../../assets/img/VideoControl/9.png") no-repeat
        center center;
      background-size: 100% 100%;
    }
    .pointer {
      cursor: pointer;
    }
    .active {
      background: rgba(18, 129, 129, 0.5);
    }
  }

  .iframe {
    width: 100%;
    height: 10%;
    position: absolute;
    top: 50px;
    left: 0px;
    z-index: 1;
    // opacity: 0;
    background: none;
    // display: none;
  }
}
</style>

